<template >
  <el-tabs v-model="activeName" :active-name="activeName" >
    <el-tab-pane  v-for="(tabItem,tabIndex) in apps" :key="tabIndex" :label="tabItem.name" :name="tabItem.groupid">
      <template v-for="(row ,rowindex) in (Math.floor(tabItem.templates.length/colCnts)+1)" v-if="tabItem.templates!=null &&tabItem.templates.length >0">
        <el-row  type="flex" :key="rowindex"  :gutter="10" >
          <el-col :span="24/colCnts" v-for="(col ,colindex) in colCnts" :key="colindex">
            <el-card v-if="tabItem.templates!=null &&(rowindex)*colCnts +colindex < tabItem.templates.length" :body-style="{ padding: '0px' }">
              <div style="padding: 14px;text-align:center;cursor:pointer;" @click="createHost(tabItem.id,tabItem.name,tabItem.templates[(rowindex)*colCnts +colindex])">
                <span v-if="tabItem.templates[(rowindex)*colCnts +colindex].iconData!=null">
                  <img  :src="tabItem.templates[(rowindex)*colCnts +colindex].iconData.image" alt="" class="image" />
                </span>
                <span >{{tabItem.templates[(rowindex)*colCnts +colindex].name}}</span>
                <div class="bottom clearfix">

                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </template>
      <template v-else>
        <div class ="noshadow">
            暂无模板
        </div>

      </template>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  name: 'templateList',
  props: {
    apps: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      // rowCnts:0,
      colCnts:4,
      activeName:''
    }
  },
  watch:{
    apps:function(newApps){
      if (newApps!=null && newApps.length > 0 ){
        this.activeName = newApps[0].groupid;
      }
    }
  },

  mounted() {

  },
  methods: {
    createHost(appid, appname, template) {
      this.$emit('transferCreateHostAction', {app:{id:appid,name:appname}, template: template});
    }
  }
}
</script>

<style scoped>
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }
  .noshadow{
    padding: 14px;
    text-align:center;
  }
  .image {

    width: 64px;
    height: 64px;
    display: block;
    margin:auto;

  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }

  .clearfix:after {
      clear: both
  }
</style>
